<template>
	<view class="container">
		<view class="_card addr" @click="selectAddr">
			<u-icon name="map" size="48rpx" color="#033787"></u-icon>
			<view class="info">
				<view class="name">{{addr.name}} {{addr.phone}}</view>
				<view class="address">{{addr.addr}}</view>
			</view>
		</view>
		<view class="_card goods-box">
			<view class="title">{{$t('order.info.goods')}}</view>
			<view class="list">
				<view v-for="(item, index) in goodsList" :key="index" class="item _card">
					<u-image :src="item.pic" radius="16rpx" show-loading width="168rpx" height="168rpx"></u-image>
					<view class="info">
						<view class="name u-line-1">{{item.name}}</view>
						<view class="parameter">
							{{$t('goods.sales')}}: {{item.sales}}
							<text style="margin-left: 24rpx;">{{$t('goods.energy')}}: {{item.energy}}</text>
						</view>
						<view class="tags">
							<view v-for="(tag, index) in item.tags" :key="index" class="tag">{{tag}}</view>
						</view>
						<view class="price-box">
							<view class="price">
								<text class="symbol">$</text>{{item.price}}
							</view>
							<view class="num"> 886</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="_card additional">
			<view class="item">
				<view>{{$t('order.settle.tableware')}}</view>
				<my-picker v-model="order.tableware" :option="tableware" width="" type="text"></my-picker>
			</view>
			<view class="item">
				<view>{{$t('order.settle.deliver-time')}}</view>
				<my-picker v-model="order.deliverTime" :option="deliverTime" width="" type="text"></my-picker>
			</view>
			<view class="item">
				<view>{{$t('order.settle.progress')}}</view>
				<view><text style="color: #E35525;">150</text>/200</view>
			</view>
			<view class="item">
				<view>{{$t('order.settle.receiving')}}</view>
				<u-checkbox-group>
					<u-checkbox v-model="order.receiving" size="32" active-color="#033787" shape="circle"
						:label="$t('order.settle.intelligent-food-cabinet')"></u-checkbox>
				</u-checkbox-group>
			</view>
		</view>
		<view class="_card additional">
			<view v-for="(item, index) in preferential" :key="index" class="item">
				<view>{{item.name}}</view>
				<view>-${{item.price}}</view>
			</view>
			<view class="item" @click="selectCoupon">
				<view>{{$t('coupon')}}</view>
				<view>-$2.56</view>
			</view>
			<view class="item">
				<view>{{$t('order.preferential.integral').replace('{$i}', 100).replace('{$d}', 10)}}</view>
				<u-checkbox-group>
					<u-checkbox v-model="order.integral" size="32" active-color="#033787" shape="circle"></u-checkbox>
					<view>-$2.56</view>
				</u-checkbox-group>
			</view>
			<view class="item amount">
				<view>{{$t('order.settle.amount')}}</view>
				<view class="price">$2.56</view>
			</view>
		</view>
		<view class="_card additional">
			<view class="item">
				<view>{{$t('order.settle.invoice')}}</view>
				<u-checkbox-group>
					<u-checkbox v-model="order.invoice" size="32" active-color="#033787" shape="circle"></u-checkbox>
				</u-checkbox-group>
			</view>
		</view>
		<u-radio-group v-model="order.payment" class="_card additional" style="flex-direction: column">
			<view v-for="(item, index) in payment" :key="index" class="item">
				<view class="payment"><u-icon :name="item.icon"></u-icon> {{item.name}}</view>
				<u-radio :name="item.id" size="32" active-color="#033787" shape="circle"></u-radio>
			</view>
		</u-radio-group>
		<view class="settle">
			<view class="price">
				<text class="symbol">hk$</text>
				11086.00
			</view>
			<view class="submit" @click="settle">{{$t('order.pay')}}</view>
		</view>
	</view>
</template>

<script>
	import picker from '@/components/picker.vue'
	export default {
		components: {
			'my-picker': picker
		},
		data() {
			return {
				addr: {
					addr: "地址地址4",
					id: 4,
					name: "姓名4",
					phone: "123131231"
				},
				goodsList: [{
						id: 1,
						pic: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
						name: '這是早餐',
						sales: 88,
						energy: 108,
						tags: ['好吃', '配送快'],
						price: 10.86
					},
					{
						id: 2,
						pic: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
						name: '這是午餐',
						sales: 88,
						energy: 108,
						tags: ['肥牛不错'],
						price: 10.86
					}
				],
				deliverTime: [],
				preferential: [{
					name: '早鳥優惠',
					price: 1.23
				}],
				order: {
					tableware: 1,
					deliverTime: 0,
					receiving: 0,
					invoice: 0,
					integral: 0,
					payment: 'balance'
				}
			}
		},
		computed: {
			tableware() {
				return [{
						id: 1,
						label: this.$t('order.settle.tableware-auto')
					},
					{
						id: 2,
						label: this.$t('order.settle.tableware-not')
					},
				]
			},
			payment() {
				return [{
						id: 'balance',
						name: this.$t('order.payment.balance'),
						icon: '/static/icon/payment/balance.png'
					},
					{
						id: 'wechat',
						name: this.$t('order.payment.wechat'),
						icon: '/static/icon/payment/wechat.png'
					},
					{
						id: 'alipay',
						name: this.$t('order.payment.alipay'),
						icon: '/static/icon/payment/alipay.png'
					},
				]
			}
		},
		onShow() {
			let addr = uni.getStorageSync('selectAddr')
			if (addr) {
				this.addr = addr
				uni.removeStorage({
					key: 'selectAddr'
				})
			}
			this.setDeliverTime()
		},
		methods: {
			setDeliverTime() {
				this.deliverTime = [{
					id: 0,
					label: this.$t('order.settle.deliver-time-now')
				}]
			},
			selectAddr() {
				uni.navigateTo({
					url: '/pages/member/addr/index?select=1'
				})
			},
			selectCoupon() {
				uni.navigateTo({
					url: '/pages/member/coupon/index?select=1'
				})
			},
			settle() {
				uni.navigateTo({
					url: '/pages/order/pay-res'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		padding-bottom: 88px;
	}

	._card {
		margin-top: 24rpx;
	}

	.addr {
		display: flex;
		justify-items: center;
		height: 80rpx;
		font-weight: 600;

		.info {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin-left: 24rpx;

			.name {
				font-size: 24rpx;
				color: #033787;
			}

			.address {
				font-size: 30rpx;
				color: #0C1626;
			}
		}
	}

	.goods-box {
		padding: 0;

		.title {
			padding: 24rpx;
			border-bottom: 1rpx solid #E6EAEE;
			font-size: 26rpx;
			font-weight: 600;
		}

		.list {
			padding: 24rpx;

			.item:not(:first-child) {
				border-top: 1rpx solid #E6EAEE;
				padding-top: 16rpx;
			}

			.item {
				display: flex;
				height: 160rpx;
				padding: 0;
				margin: 0;
				margin-bottom: 24rpx;

				.info {
					width: calc(100% - 108rpx);
					margin-left: 24rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.name {
						font-size: 30rpx;
						color: #0C1626;
						font-weight: 600;
					}

					.parameter {
						font-size: 22rpx;
						color: #B9BFCB;
					}

					.tags {
						display: flex;

						.tag {
							font-size: 18rpx;
							border-radius: 4rpx;
							padding: 2rpx 6rpx;
							color: #fff;
							margin-right: 8rpx;
							background-color: #E35525;
						}
					}

					.price-box {
						display: flex;
						justify-content: space-between;
						align-items: flex-end;

						.price {
							color: #E35525;
							font-size: 30rpx;

							.symbol {
								font-size: 16rpx;
							}
						}

						.num {
							font-size: 16rpx;
							color: #7C8493;
						}
					}
				}
			}
		}
	}

	.additional {
		font-size: 26rpx;
		color: #0C1626;

		.item:not(:first-child) {
			margin-top: 32rpx;
		}

		.item {
			display: flex;
			justify-content: space-between;
		}

		.payment {
			display: flex;

			.u-icon {
				margin-right: 8rpx;
			}
		}
		
		.amount {
			height: 88rpx;
			border: 1rpx solid #E35525;
			border-radius: 12rpx;
			background-color: rgba(227, 85, 37, 0.10);
			font-weight: 600;
			font-size: 30rpx;
			align-items: center;
			padding: 0 24rpx;
			
			.price {
				color: #E35525;
			}
		}
	}

	.settle {
		z-index: 10076;
		position: fixed;
		bottom: 12rpx;
		width: calc(100% - 48rpx);
		margin: 0 24rpx;
		border-radius: 52rpx;
		height: 104rpx;
		display: flex;
		overflow: hidden;
		justify-content: space-between;
		background-color: #033787;
		color: #fff;
		font-size: 36rpx;

		.price {
			display: flex;
			justify-content: center;
			align-items: center;
			padding-left: 36rpx;
			font-weight: 600;

			.symbol {
				margin-right: 4rpx;
				font-size: 16rpx;
			}
		}

		.submit {
			width: 248rpx;
			background-color: #E35525;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>